<template>
	<div ref="el">
		<base-list-plus
			:loading="loading"
			:isFinish="isFinish"
			:isEmpty="isEmpty"
			:error="error"
			class="min-h-[200px]"
			@load="search"
			@reload="search(true)">
			<base-waterfall :data="list" :column="cols" :rowSpacing="15" :picturePreReading="false">
				<template v-slot="{ item, width }">
					<sports-champion-item :data="item" :style="{ width }" />
				</template>
			</base-waterfall>
		</base-list-plus>
	</div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { BaseWaterfall, BaseListPlus } from '@/components/base'
import SportsChampionItem from '../sports-champion-item/index.vue'
import { useListCols, useRequest } from '@/hooks'
import { getLeagueEvents } from '@/api/betting'
import { useAppStore, useMatchStore } from '@/store'
import { Match } from '@/types'

const appStore = useAppStore()
const matchStore = useMatchStore()

const props = defineProps({
	leagueId: {
		type: String,
		required: true
	}
})

const el = ref(null)

const { cols } = useListCols(el)

const { run, loading, error, isFinish, isEmpty, list } = useRequest<Match>(getLeagueEvents, {
	pageSize: 12,
	onSuccess: () => {
		matchStore.setList(list.value, 'champnion')
	}
})

const search = (refresh = false) => {
	run(
		{
			locale: appStore.lang,
			oddsStyle: appStore.odds,
			leagueId: props.leagueId
		},
		{ refresh }
	)
}

watch(
	() => [appStore.lang, appStore.odds, props.leagueId],
	() => {
		search(true)
	},
	{ immediate: true }
)
</script>
